<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<link  href ="plug-in/graphreport/css/metrole/report.css" />
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />
<!-- script type="text/javascript">
	$(function() {
		$(document).ready(function() {
			var chart;
			$.ajax({
				type : "POST",
				url : "eduHchartsController.do?getHchartsrBar&reportType=${reportType}",
				success : function(jsondata) {
					data = eval(jsondata);      
					var xAxisCategories = new Array();
					for(var i = 0; i < data[0].data.length; i++){
						xAxisCategories[i] = data[0].data[i].name;
					}

					chart = new Highcharts.Chart({
						chart : {
							renderTo : 'containerline',
							plotBackgroundColor : null,
							plotBorderWidth : null,
							plotShadow : false
						},
						title : {
							text : "<t:mutiLang langKey="user.browser.analysis"/>"
						},
						xAxis : {
							categories : xAxisCategories
						},
						tooltip : {
							pointFormat : '{series.name}: <b>{point.y}</b>',
							percentageDecimals : 1

						},
						exporting:{  
			                filename:'折线图',  
			                 url:'${ctxPath}/logController.do?export'  
			            }, 
						plotOptions : {
							pie : {
								allowPointSelect : true,
								cursor : 'pointer',
								showInLegend : true,
								dataLabels : {
									enabled : true,
									color : '#000000',
									connectorColor : '#000000',
									formatter : function() {
										return '<b>' + this.point.name + '</b>: ' + this.y;
									}
								}
							}
						},
						series : data
					});
				}
			});
		});
	});
</script-->

<div class="operations" style="margin-bottom: 10px;"> 
	<div class="bd3" id="bd3">
<%-- <t:formvalid formid="formobj" dialog="false" layout="div" callback="test" action="jeecgFormvalidController.do?testsubmit=2" beforeSubmit="setContentc"> --%>
	<!--  <fieldset class="step"> -->				
		<div class="form">
			<label class="Validform_label"> 线上报名： </label> 
			<span id="onLine"></span>
			<!-- <input name="shoppingsite1" class="rt2" id="shoppingsite21" type="checkbox" value="1" datatype="need2" nullmsg="请选择您的爱好！" />阅读 
			<input name="shoppingsite1" class="rt2" id="shoppingsite22" type="checkbox" value="2" /> 音乐
		    <input name="shoppingsite1" class="rt2" id="shoppingsite23" type="checkbox" value="3" /> 运动 
		    <span class="Validform_checktip"></span> -->
		</div>
		
		<div class="form">
			<label class="Validform_label">线下报名： </label> 
			<span id="offLine"></span>
		    <span class="Validform_checktip"></span>
		</div>		  		  
		
		<div class="form">
			<label class="Validform_label"> 开始日期： </label> 
			<input type="text" name="time" id="beginDate" class="easyui-datebox"> 
			<span class="Validform_checktip"></span>
			<label class="Validform_label"> 结束日期： </label> 
			<input type="text" name="time" id="endDate" class="easyui-datebox"> 
			<span class="Validform_checktip"></span>
			 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	
			  <input class="btn"  id="btn"  type="submit" value="提交" style="height:30px;width:100px !important;border-radius:5px"/>
		</div> 
		
	<!-- </fieldset> -->
<%-- </t:formvalid> --%>
</div>
</div>
<div id="containerline" style="width: 80%; height: 80%"></div>
<style>
   .bd3 {
    text-align: left;
}

.form {
    padding: 5px;
    margin: 10px;
}
</style>

<script type="text/javascript">
$(function(){
	
	init();
	test();
});
function init(){
	
	$.ajax({
			async : false,
			cache : false,
			type : 'GET',
			url : 'eduHchartsController.do?online',// 请求的action路径
			error : function() {// 请求失败处理函数
			},
			success : function(data) {
			   var d = $.parseJSON(data);
		        if (d.success) {
		            var objs= d.obj;
		            for(var i=0;i<objs.length;i++){
		            	var obj =objs[i];
		            	var str = '<input name="onLine" class="rt2" id="'+obj.code+'" type="checkbox"  tr="'+obj.name+'" value="'+obj.code+'" />'+obj.name+'&nbsp;&nbsp;';
		            	 $("#onLine").append(str);
		            }
		           		            
		        }
			}
	});	
	
	
	$.ajax({
		async : false,
		cache : false,
		type : 'GET',
		url : 'eduHchartsController.do?offline',// 请求的action路径
		error : function() {// 请求失败处理函数
		},
		success : function(data) {
		   var d = $.parseJSON(data);
	        if (d.success) {
	            var objs= d.obj;
	            for(var i=0;i<objs.length;i++){
	            	var obj =objs[i];
	            	var str = '<input name="offLine" class="rt2" id="'+obj.code+'" type="checkbox" tr="'+obj.name+'" value="'+obj.code+'" />'+obj.name+'&nbsp;&nbsp;';
	            	 $("#offLine").append(str);
	            }
	           		            
	        }
		}
});	
	

	
$("#btn").bind("click",function(){
		var onLineId="";
		var onLineName="";  
		var offLineId="";
		var offLineName="";  
	    var beginDate ="";
		var endDate ="";
		var onlines = $("#onLine").find("input[name='onLine']:checked");
		var offlines = $("#offLine").find("input[name='offLine']:checked");
		var date = $(".combo-value");
		beginDate = $(date[0]).val();
		endDate = $(date[1]).val();
		var  chenkLen = $("#bd3").find("input[type='checkbox']:checked");
		if(chenkLen.length > 5){
			alert("最多只能选择5个做比较");
			return ;
		}
		//debugger;
		if(beginDate == "" || endDate == undefined){
			alert("请选择开始日期");
			return ;
		}
		
		if(endDate == "" || endDate == undefined){
			alert("请选择结束日期");
			return ;
		}
		
		var begin = beginDate.replace(/-/g,"");
		var end = endDate.replace(/-/g,"");

		if(begin == end || begin >= end){
			alert("结束日期要大于开始日志");
			return; 
		}
		if((end - begin) > 31 ){
			alert("日期间隔不能超过一个月");
			return;
		}
		
		for(var i = 0;i<onlines.length;i++){
			var online = onlines[i];
			 onLineId+=$(online).attr("id")+",";
			 onLineName+=$(online).attr("tr")+",";
		}
		for(var i = 0;i<offlines.length;i++){
			var offline = offlines[i];
			 offLineId+=$(offline).attr("id")+",";
			 offLineName+=$(offline).attr("tr")+",";
		}
		if(onLineId.lastIndexOf(",") != "-1"){
			onLineId =onLineId.substring(0,onLineId.length-1);
			onLineName =onLineName.substring(0,onLineName.length-1);
		}
		 
		if(offLineId.lastIndexOf(",") != "-1"){
			offLineId =offLineId.substring(0,offLineId.length-1);
			offLineName =onLineName.substring(0,offLineName.length-1);
		}
		
		if(onLineId =="" && offLineId == ""){
			alert("请选择报名人数");
			return;
		}
					
		  var formData={}; 
		  formData.onLineId=onLineId;
		  formData.onLineName=onLineName;
		  formData.offLineId=offLineId;
		  formData.offLineName=offLineName; 
		  formData.beginDate=beginDate;
		  formData.endDate=endDate;
		  formData.reportType="line";
		  
		   $.ajax({
         		async : false,
         		cache : false,
         		type : 'POST',
         		url : 'eduHchartsController.do?chartsrBar',// 请求的action路径
         		data : formData,
         		error : function() {// 请求失败处理函数
         		},
         		success : function(jsondata) {
         			initChar(jsondata)         			
         		}
             });		
		
	});
	
};	


function test(){
	
	var chart = new Highcharts.Chart('containerline', {
	    title: {
	        text: '不同城市的月平均气温',
	        x: -20
	    },
	    subtitle: {
	        text: '数据来源: WorldClimate.com',
	        x: -20
	    },
	    xAxis: {
	        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
	    },
	    yAxis: {
	        title: {
	            text: '温度 (°C)'
	        },
	        plotLines: [{
	            value: 0,
	            width: 1,
	            color: '#808080'
	        }]
	    },
	    tooltip: {
	        valueSuffix: '°C'
	    },
	    legend: {
	        layout: 'vertical',
	        align: 'right',
	        verticalAlign: 'middle',
	        borderWidth: 0
	    },
	    series: [{
	        name: '东京',
	        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
	    }, {
	        name: '纽约',
	        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
	    }, {
	        name: '柏林',
	        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
	    }, {
	        name: '伦敦',
	        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
	    }]
	});
	
}
function initChar(jsondata){
	
	data = eval(jsondata);    
	debugger;
	var xAxisCategories = new Array();
	for(var i = 0; i < data[0].data.length; i++){
		xAxisCategories[i] = data[0].data[i].name;
	}

	var chart = new Highcharts.Chart({
		chart : {
			renderTo : 'containerline',
			plotBackgroundColor : null,
			plotBorderWidth : null,
			plotShadow : false
		},
		title : {
			text : "报名人数分析"
		},
		xAxis : {
			categories : xAxisCategories,
			labels: {
	            rotation: 90
	        }
		},
		yAxis:{
			title:{
               text:'人数(个)'				
			},
			mix: 0
		},
		tooltip : {
			
			 formatter: function() {
			        return ''+ this.series.name +''+
			         this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' 个';
			   }
		//	pointFormat : '报名人数'
		//	percentageDecimals : 1

		},
	//	exporting:{  
     //       filename:'折线图',  
     //        url:'${ctxPath}/logController.do?export'  
     //   }, 
		plotOptions : {
			pie : {
				allowPointSelect : true,
				cursor : 'pointer',
				showInLegend : true,
				dataLabels : {
					enabled : true,
					color : '#000000',
					connectorColor : '#000000',
					formatter : function() {
						return '<b>' + this.point.name + '</b>: ' + this.y;
					}
				}
			}
		},
		series : data
	});
	
}	



	
	
	


</script>


